<!--集团动态-->
<template>
  <el-card class="mt15 mb15">
    <!-- 第一行 -->
    <div class="search-filter">
      <el-row :gutter="20">
        <el-col :span="6">
          <sitem label="标题：">
            <el-input
              slot="item"
              v-model="listQuery.title"
              placeholder="请输入"
              clearable
              @input="handleFilter"
            />
          </sitem>
        </el-col>
        <el-col :span="6">
          <sitem label="发布状态：">
            <el-select
              slot="item"
              v-model="listQuery.publishStatus"
              placeholder="选择"
              clearable
              @change="handleFilter"
            >
              <el-option
                v-for="item in publishOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </sitem>
        </el-col>
        <el-col :span="6">
          <sitem label="">
            <el-button
              slot="item"
              v-waves
              class="el-icon-search"
              type="primary"
              style="width: 80px"
              @click="handleFilter"
            >
              搜索
            </el-button>
          </sitem>
        </el-col>
      </el-row>
    </div>

    <div class="mb15">
      <el-button type="primary" icon="el-icon-document-add" @click="editShow('新增')">新增</el-button>
      <!--      <el-button type="danger" icon="el-icon-document-delete">删除</el-button>-->
      <!--      <el-button icon="el-icon-refresh-left" type="success">撤回</el-button>-->
      <el-button icon="el-icon-refresh" type="info" @click="getList()">刷新</el-button>
    </div>

    <el-table :data="list" :stripe="true" style="width: 100%">
      <!-- <el-table-column type="selection" width="50" /> -->
      <!-- 缩略图 -->
      <el-table-column align="center" label="缩略图" width="120px">
        <template slot-scope="{ row }">
          <el-image class="tupian" style="display: block;height: 50px;" :src="row.thumb_dictText" />
        </template>
      </el-table-column>
      <el-table-column align="left" prop="title" label="标题" />
      <el-table-column align="center" prop="publishStatus_dictText" label="状态" width="100px" />
      <el-table-column align="center" prop="topFlag_dictText" label="置顶" width="100px" />

      <!-- 更新
      <el-table-column align="center" prop="updateBy" label="更新人" width="120px">
      </el-table-column>-->

      <!-- 编辑
      <el-table-column align="center" prop="createBy" label="创建人" width="120px">
      </el-table-column>-->

      <!-- 更新时间
      <el-table-column
        align="center"
        prop="updateTime"
        label="更新时间"
        width="150px"
      >
      </el-table-column>-->

      <!-- 发布时间 -->
      <el-table-column
        align="center"
        prop="publishTime"
        label="发布时间"
        width="180px"
      />

      <!-- 操作 -->
      <el-table-column label="操作" width="200px" fixed="right" align="center">
        <template slot-scope="{row,$index}">
          <el-button type="text" @click="editShow('编辑',row.id)">编辑</el-button>
          <el-button v-show="!row.topFlag" type="text" @click="topFlag(row,$index)">置顶</el-button>
          <el-button v-show="row.topFlag" type="text" @click="topFlag(row,$index)">取消置顶</el-button>
          <el-button type="text" @click="delItem(row,$index)">删除</el-button>
          <el-button v-show="1==row.publishStatus" type="text" @click="setPublishStatus(row,$index)">撤回</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      next-text="下一页"
      layout="prev, pager, next, jumper"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
    <editDrawer ref="editDrawer" @refresh="refresh" />
  </el-card>
</template>

<script>
import { cmsContent_list, cmsContent_delete, cmsContent_edit } from '@/api/article'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import editDrawer from './components/editDrawer'
import sitem from '@/components/searchItem'
export default {
  name: 'ComplexTable',
  components: { Pagination, editDrawer, sitem },
  directives: { waves },
  data() {
    return {
      list: [], // 内容列表
      total: 0, // 总页数
      listLoading: true,
      // 查询参数
      listQuery: {
        channelId: null,
        title: '',
        pageNo: 1,
        pageSize: 10,
        sort: false
      },
      // 状态 选择向
      publishOptions: [{ 'value': '0', 'label': '草稿' }, { 'value': '1', 'label': '发布' }, { 'value': '2', 'label': '撤回' }]
    }
  },
  created() {
    this.listQuery.channelId = this.$route.query.channelId
    this.getList()
  },
  methods: {
    // 打开编辑弹窗
    editShow(title, id, rowData) { // rowData 暂未使用
      this.$refs.editDrawer.show(title, this.listQuery.channelId === 'group' || this.listQuery.channelId === 'notice' ? 320 : 285, this.listQuery.channelId === 'group' || this.listQuery.channelId === 'notice' ? 180 : 158, id, this.listQuery.channelId)
    },
    refresh() {
      this.getList()
    },
    // 分页数据
    getList() {
      const prams = JSON.parse(JSON.stringify(this.listQuery))
      prams.title ? prams.title = '*' + prams.title + '*' : null
      this.listLoading = true
      cmsContent_list(prams).then(response => {
        this.list = response.result.records
        this.total = response.result.total
        this.listLoading = false
      })
    },
    // 搜索
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList(this.listQuery)
    },
    // 删除
    delItem(e, index) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cmsContent_delete({ id: e.id }).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.refresh()
        })
        // this.list.splice(index, 1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 置顶操作
    topFlag(e, index) {
      this.$confirm('确定要置顶/取消吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const topFlag = !e.topFlag
        console.log('topFlag================>', e.topFlag)
        let msg = '置顶成功'
        if (!topFlag) msg = '取消置顶成功！'

        // if(e.topFlag==)
        cmsContent_edit({ id: e.id, topFlag: topFlag }).then(response => {
          this.$message({
            type: 'success',
            message: msg
          })
          this.refresh()
        })
        // this.list.splice(index, 1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    // 撤回状态
    setPublishStatus(e, index) {
      this.$confirm('确定要撤回吗（注意：招聘网配置的内容，需要手动去除）?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const msg = '撤回成功，可在编辑时重新发布！'
        // if(e.topFlag==)
        cmsContent_edit({ id: e.id, publishStatus: 2 }).then(response => {
          this.$message({
            type: 'success',
            message: msg
          })
          this.refresh()
        })
        // this.list.splice(index, 1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
